.text-icon {
  display: inline-flex;
  align-items: center;

  &--left {
    flex-direction: row;

    .text-icon__text {
      margin-left: var(--icon-space, 4px);
    }
  }

  &--right {
    flex-direction: row;

    .text-icon__text {
      margin-right: var(--icon-space, 4px);
    }
  }

  &--top {
    flex-direction: column;
    align-items: center;

    .text-icon__text {
      margin-top: var(--icon-space, 4px);
    }
  }

  &--bottom {
    flex-direction: column;
    align-items: center;

    .text-icon__text {
      margin-bottom: var(--icon-space, 4px);
    }
  }

  .text-icon__text {
    font-size: 14px;
    line-height: 1.2;
  }
}
